<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>番茄时钟</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/vars.css">
    <style>
      /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
      }

      :root{
        --bg-transparent: 1;

        --main-font-color: rgb(244, 158, 96);
        --font-color: #ffffff;
        --rest-font-color: rgb(0, 153, 68);
        --btn-bg-color: rgba(230, 102, 11, 0.2);
      }


      .view {
        width: 100%;
        height: 100%;
        /* background-color: rgba(255, 255, 255, var(--bg-transparent)); */
        position: relative;
        margin: 0 0 0 auto;
        /* background-color: rgba(255, 255, 255, 0.3); */
        background-color: rgba(0, 0, 0, 0.3);
        color: var(--font-color);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 5vw 6vw;
        border-radius: 8vw;
      }


      .tomato-title{
        color: var(--main-font-color);
        opacity: 0.7;
        font-size: 5vw;
        margin-bottom: 1.8vw;
      }

      .tomato-time{
        color: var(--main-font-color);
        font-weight: 700;
        font-size: 11vw;
        letter-spacing: 0.8vw;
      }

      .tomato-count{
        display: flex;
      }

      .tomato-count div {
        margin-right: 4.1vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .btns-box{
        position: fixed;
        display: flex;
        justify-content: right;
        right: 7.1vw;
        bottom: 6.1vw;
        font-size: 14.7vw;
        width: 39vw;
      }

      .btns-box div{
        width: 50%;
        transition: all 0.3s;
      }

      .icon-btn{

        cursor: pointer;
        padding: 4.5vw;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.15);
        margin-left: 4.1vw;
      }

      .hide {
        display: none;
      }
      .stop-btn{
        background-color: var(--btn-bg-color);
        color: var(--main-font-color);
      }

      .btns-box .stop-box{
        width: 0;
        overflow: hidden;
      }

      .tomato-btn{
        font-size: 9.1vw;
      }


    </style>
  </head>
  <body>
    <div class="view">
      <div class="tomato-info">
        <div class="tomato-title">学习</div>
        <div class="tomato-time">25:00</div>
      </div>
      <div class="tomato-count">
        <div class="tomato-red"><icon-svg name="tomato" color="#E60012" class="tomato-btn"></icon-svg> <span>0</span></div>
        <div class="tomato-orange"><icon-svg name="tomato" color="#ffd739" class="tomato-btn"></icon-svg> <span>0</span></div>
        <!-- <div>6h 15m</div> -->
      </div>
      <div class="btns-box">
        <div>
          <icon-svg name="play" class="play-btn icon-btn"></icon-svg>
          <icon-svg name="pause" class="pause-btn hide icon-btn" ></icon-svg>
        </div>
        <div class="stop-box">
          <icon-svg name="stop" class="stop-btn icon-btn"></icon-svg>
        </div>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import { Time } from '../common/utils/time.js'
    import IconSvg from "../components/IconSvg/IconSvg.js";
    customElements.define("icon-svg", IconSvg);

    let data = {
      // studyTime: 1500000,300000
      studyTime: 1500000,
      restTime: 300000,
      redTomato: [],
      orangeTomato: [],
      title: '阅读',
      auto: false
    }
    let time = new Time();
    let playBtnEl = document.querySelector(".play-btn");
    let pauseBtnEl = document.querySelector(".pause-btn");
    let stopBoxEl = document.querySelector(".stop-box");
    
    let tomatoTimeEl = document.querySelector(".tomato-time");
    let tomatoTitleEl = document.querySelector(".tomato-title");
    let tomatoRedEl = document.querySelector(".tomato-red span");
    let tomatoOrangeEl = document.querySelector(".tomato-orange span");
    let tomatoRedBoxEl = document.querySelector(".tomato-red");
    let tomatoOrangeBoxEl = document.querySelector(".tomato-orange");

    const msToTime = (s) => {
      var ms = s % 1000;
      s = (s - ms) / 1000;
      var secs = s % 60;
      s = (s - secs) / 60;
      var mins = s;
      // var hrs = (s - mins) / 60;
      
      return {
        mins , secs , ms
      };
    }

    class An {
      constructor(options) {
        this.options = options;
        this.timer = '';
        this.studyTime = '';
        this.restTime = '';
        this.type = '';
        this.clear = false;
        this.half = false;
      }

      init(){
        this.studyTime = data.studyTime;
        this.restTime = data.restTime;
        this.type = 'study';
        this.half = false;
        document.documentElement.style.setProperty('--main-font-color', `#f49e60`);
        document.documentElement.style.setProperty('--btn-bg-color', `rgba(230, 102, 11, 0.2)`);
        let { mins , secs } = msToTime(this.studyTime);
        
        mins = mins < 10 ? '0' + mins : mins;
        secs = secs < 10 ? '0' + secs : secs;
        tomatoTimeEl.innerText = `${mins}:${secs}`;
        tomatoTitleEl.innerText = data.title;
        // if(data.auto)this.start();
      }

      start(){
        // snapScreen()
        this.clear = false;
        stopBoxEl.classList.remove("stop-box");
        playBtnEl.classList.add('hide');
        pauseBtnEl.classList.remove('hide');
        setTimeout(()=>this.draw(), 1000);
      }
      pause(){
        this.clear = true;
        playBtnEl.classList.remove('hide');
        pauseBtnEl.classList.add('hide');
      }
      stop(){
        playBtnEl.classList.remove('hide');
        pauseBtnEl.classList.add('hide');
        stopBoxEl.classList.add("stop-box");
        clearInterval(this.timer);
        this.timer = null;
        this.init();
      }

      rest(){
        this.studyTime = data.studyTime;
        this.restTime = data.restTime;
        this.type = 'rest'
        document.documentElement.style.setProperty('--main-font-color', `rgb(0, 153, 68)`);
        document.documentElement.style.setProperty('--btn-bg-color', `rgb(0, 153, 68, 0.2)`);
        let { mins , secs } = msToTime(this.restTime);
        
        mins = mins < 10 ? '0' + mins : mins;
        secs = secs < 10 ? '0' + secs : secs;
        tomatoTimeEl.innerText = `${mins}:${secs}`;
        tomatoTitleEl.innerText = data.title;
        
        if(data.auto)this.start();
      }

      end(type){
        clearInterval(this.timer);
        this.timer = null;
        playBtnEl.classList.remove('hide');
        pauseBtnEl.classList.add('hide');
        if(type === 'rest'){
          stopBoxEl.classList.remove("stop-box");
        }else{
          stopBoxEl.classList.add("stop-box");
        }
      }

      tomatoCount (key) {
        let index = data[key].findIndex(item => {
          if(item.time === time.yearMonthDayFormat()){
            return true;
          }
        })
        return index;
      }

      countTimer(arr){
        let timer = arr.reduce((accumulator, currentValue)=>accumulator + currentValue,0)

        let {hrs, mins , secs , ms} = time.msToTime(timer);

        return `${hrs}h ${mins}m ${secs}s`;
      }

      initTomato(){
        let i = this.tomatoCount('redTomato');
        let index = this.tomatoCount('orangeTomato');
        
        let x = index > -1 ? data.orangeTomato[index].list.length : 0;
        let n = i > -1 ? data.redTomato[i].list.length : 0;
        tomatoOrangeEl.innerText = x;
        tomatoRedEl.innerText = n;
        tomatoOrangeBoxEl.title = x ? this.countTimer(data.orangeTomato[index].list)  : 0;
        tomatoRedBoxEl.title = n ? this.countTimer(data.redTomato[i].list)  : 0;
        if(window.sendSaveData)window.sendSaveData(data);
      }

      redTomato(){
        this.half = false;
        let index = this.tomatoCount('orangeTomato');
        
        if(index > -1){
          data.orangeTomato[index].list.pop();
        }
        let i = this.tomatoCount('redTomato');
        if(i > -1){
          data.redTomato[i].list.push(data.studyTime);
        }else{
          data.redTomato.push({
            time: time.yearMonthDayFormat(),
            list: [ data.studyTime ]
          })
        }
       
        this.initTomato();
        
      }

      orangeTomato(residueTime){
        if(this.type === 'study' && !this.half){
          if( residueTime <= (data.studyTime / 2)){
            this.half = true;
            let index = this.tomatoCount('orangeTomato');
            if(index < 0){
              data.orangeTomato.push({
                time: time.yearMonthDayFormat(),
                list: [data.studyTime / 2]
              });
            }else{
              data.orangeTomato[index].list.push(data.studyTime / 2);
            }
            this.initTomato();
          }
        }
      }

      draw(){
        let t = new Date().getTime();
        let s = 0;
        this.timer = setInterval(() => {
          let processTime = this.type === 'study' ? 'studyTime' : 'restTime';
          if(this.clear){
            clearInterval(this.timer);
            this.timer = null;
            this[processTime] = this[processTime] - s;
            return;
          }
          let now = new Date().getTime();
          s = now - t;
          let residueTime = this[processTime] - s;
          let { mins , secs } = msToTime(residueTime);
          tomatoTimeEl.innerText = `${mins < 10 ? '0' + mins : mins}:${secs < 10 ? '0' + secs : secs}`;
          this.orangeTomato(residueTime);
          if(!mins && secs < 0 && this.type === 'study'){
            utools.showNotification('休息一下吧☕☕☕');
            this.redTomato();
            this.end('rest');
            this.rest();
            return;
          }
          if(!mins && secs < 0 && this.type === 'rest'){
            utools.showNotification('休息结束了💪');
            this.end('study');
            this.init();
            return;
          }
        }, 150);
      }

    }

    let an = new An();
    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res)=>{
        data = res || data;
        
        an.init();
        an.initTomato();

      })

      window.ipcRenderer.on('toParent', (event, res)=>{
        data.title = res.data.title;
        data.studyTime = res.data.studyTime;
        data.restTime = res.data.restTime;
        data.auto = res.data.auto;
        an.end('study');
        an.init();
        an.initTomato();
      })
    }

    playBtnEl.onclick = () => an.start();
    pauseBtnEl.onclick = () => an.pause();
    stopBoxEl.onclick = () => an.stop();

    time.an(()=>{
      if(!an.timer){
        an.init();
        an.initTomato();
      }
    })

    
    window.getData = () => data;
  </script>
</html>
